<template>
	<view class="dynamiPage">
		<view class="top-page">
			<view class="headerCommon">
				<view class="guanzhutuijian">
					<view :class="[curTab==1?'curguanzhuText':'','guanzhuText']" @click="changeTab(1)">关注</view>
					<view :class="[curTab==0?'curguanzhuText':'','guanzhuText']" @click="changeTab(0)" style="margin-right: 0;">推荐</view>
				</view>
				<view class="fabu" @click="tofabu">
					<image class="fabuImg" src="/static/new/pai.pic" mode="widthFix"></image>
					<view>发布</view>
				</view>
			</view>
			<view class="bottomline"></view>
		</view>
		<view class="dynamiContent" style="margin-bottom: 110rpx;">
			<view class="dynamiBox" v-for="(item,index) in list" :key="index">
				<view class="dynamiItem">
					<view class="dynamiItemTop">
						<view class="flexItemMain">
							<image class="flexItemLeftImg" @click="toDetail(item)" :src="item.avatar[0]" mode=""></image>
							<view class="flexItemCenter">
								<view class="flexItemCenterTop" @click="toDetail(item)">{{item.nickname}}</view>
								<view class="flexItemCenterBottom" v-if="item.sex==2">
									<image class="sexImg" src="../../static/dongtai/sex.png"></image>
									{{item.age}}
								</view>
								<view class="flexItemCenterBottom2" v-if="item.sex==1">
									<image class="sexImg" src="../../static/pages/sex.png"></image>
									{{item.age}}
								</view>
							</view>
							<image v-if="item.follow==0" @click="guanzhu(item,index,0)" src="../../static/dongtai/guanzhu.png" class="flexItemRightImg"
							 mode="widthFix"></image>
							<image v-else @click="guanzhu(item,index,1)" src="../../static/dongtai/yiguanzhu.png" class="flexItemRightImg"
							 mode="widthFix"></image>
						</view>
					</view>
					<view class="dynamiItemContent" @click="toDetail(item)">
						{{item.content}}
					</view>
					<view class="dynamiItemImgBox" @click="toDetail(item)">
						<image class="ctImg" v-for="(ite,i) in item.image" :key="i" :src="ite" mode="aspectFill"></image>
					</view>
					<view class="dynamiItemImgTime">
						<text>{{item.created_at}}</text>
						<view class="flexItemCenterBottom distance" v-if="item.distance">
							<image class="address" src="../../static/pages/address.png"></image>
							<view class="address-name">{{item.distance}}</view>
						</view>
					</view>
					<view class="dynamiItemImgBottom">
						<image class="dianzanImg" @click="zan(item,index,1)" v-if="item.is_user_give==1" src="../../static/dongtai/xin2.png"></image>
						<image class="dianzanImg" @click="zan(item,index,0)" v-else src="../../static/dongtai/xin.png"></image>
						<!-- <view class="dianzan" v-if="item.is_user_give==0">点赞</view>
						<view class="dianzan" v-else>{{item.give_sum}}</view> -->
						<view class="dianzan">{{item.give_sum}}</view>
						<image class="xinxiImg" src="../../static/dongtai/xinxi.png" @click="toDetail(item)"></image>
						<view class="xinxi">{{item.comment_sum}}</view>
						<image class="more" @click="toMore(item)" src="../../static/dongtai/more.png"></image>
					</view>
				</view>
			</view>
		</view>
		<voiceChatModal></voiceChatModal>
		<video-chat></video-chat>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				curTab: 0,
				page: 1,
				canPagejia: true,
				canPullDownRefresh: false,
				latitude: 39.9,
				longitude: 116.4,
			}
		},
		onShow() {
			this.getLocation()
			// this.getData()
		},
		//下拉刷新
		onPullDownRefresh() {
			this.canPagejia = true
			this.list = []
			this.page = 1
			this.canPullDownRefresh = true
			this.getData()
		},
		//触底刷新
		onReachBottom() { //与methods 同级
			if (this.canPagejia) {
				this.page = this.page + 1
				this.getData()
			}
		},
		methods: {
			changeTab(num) {
				this.list = []
				this.curTab = num
				this.page = 1
				this.getData()
			},
			toMore(list) {
				// console.log('点击', list)
				let that = this
				uni.showActionSheet({
					itemList: ['举报'],
					success: function(res) {
						that.jubao(list)
					},
					fail: function(res) {
						// console.log(res.errMsg);
					}
				});
			},
			jubao(list) {
				// console.log('举报', list)
				uni.navigateTo({
					url: '/pages/my/report?id=' + list.user_id + '&nickname=' + list.nickname + '&avatar=' + JSON.stringify(list.avatar),
					success(res) {

						// console.log("举报")
					}
				})

			},
			guanzhu(e, index, type) {
				//0未关注  1已关注
				let that = this
				let paramData = {
					id: e.user_id
				}
				this.$utils.postrequest("/api/user_follow", paramData, function(res) {
					if (res.code == 200) {
						if (that.curTab == 0) {
							if (type == 1) {
								that.list.forEach((item, i) => {
									if (e.user_id == item.user_id) {
										item.follow = 0
									}
								})
							} else {
								that.list.forEach((item, i) => {
									if (e.user_id == item.user_id) {
										item.follow = 1
									}
								})
							}
						} else {
							let num = 0
							let arr = [...that.list]
							arr.forEach((item, i) => {
								if (e.user_id == item.user_id) {
									let n = i - num
									that.list.splice(n, 1)
									num = num + 1
								}
							})
						}

					}
				})
			},
			zan(e, index, type) {
				let that = this
				let paramData = {
					id: e.id
				}
				this.$utils.postrequest("/api/dynamic/give", paramData, function(res) {
					if (res.code == 200) {
						if (type == 1) {
							that.list[index].give_sum = that.list[index].give_sum - 1
							that.list[index].is_user_give = 0
						} else {
							that.list[index].give_sum = that.list[index].give_sum + 1
							that.list[index].is_user_give = 1
						}
					}
				})
			},
			tofabu() {
				uni.navigateTo({
					url: '/pages/issue/dynamic'
				})
			},
			toDetail(item) {
				uni.navigateTo({
					url: '/pages/dynami/detail?id=' + item.id
				})
			},
			getData() {
				let that = this
				let paramData = {
					page: this.page,
					follow: this.curTab,
					longitude: this.longitude,
					latitude: this.latitude
				}
				// console.log(paramData);
				this.$utils.postrequest("/api/dynamiclist", paramData, function(res) {
					if (res.code == 200) {
						// // console.log(res)
						if (res.data.length > 0) {
							res.data.forEach((item, index) => {
								item.avatar = JSON.parse(item.avatar)
								item.image = JSON.parse(item.image)
							})
						} else {
							that.canPagejia = false
						}
						if (that.canPullDownRefresh) {
							uni.stopPullDownRefresh(); //停止下拉刷新动画
						}
						that.list = that.list.concat(res.data)
					}
				})
			},
			getLocation() {
				// uni.showLoading({
				// 	title: '加载中...'
				// })
				// console.log('获取定位')
				uni.getLocation({
					// map组件默认为国测局坐标gcj02，调用 uni.getLocation返回结果传递给组件时，需指定 type 为 gcj02
					type: 'gcj02',
					geocode: true,
					success: (res) => {
						// console.log(res);
						// uni.hideLoading()
						// 定位得到的经纬度
						this.longitude = res.longitude;
						this.latitude = res.latitude;
						this.getData()
					},
					fail(err) {
						// console.log(err)
						// uni.hideLoading()
						this.getData()
					}
				});
			},
		}
	}
</script>

<style scoped>
	page {
		width: 100%;
		height: 100%;
		background: #fff;
	}

	.top-page {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #FFFFFF;
		z-index: 1;
	}

	.dynamiPage {
		padding-top: 200rpx;
	}

	.headerCommon {
		padding-top: 100rpx;
		width: 100%;
		position: relative;
	}

	.dynamiBox {
		border-bottom: 14rpx solid #F6F7F9;
		padding-top: 24rpx;
	}

	.bottomline {
		width: 100%;
		height: 2rpx;
		background: #E0E0E0;
		margin-top: 30rpx;
	}

	.dynamiItemContent {
		margin: 32rpx 32rpx 16rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #171524;
	}

	.dynamiItemImgBox {
		display: grid;
		grid-template-columns: repeat(2, auto);
		/* flex-wrap: wrap; */
		grid-column-gap: 10rpx;
		grid-row-gap: 10rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		/* margin-left: 31rpx;
		margin-right: 31rpx; */
		margin-bottom: 26rpx;
		/* justify-content: space-between; */
	}

	.ctImg {
		width: 100%;
		height: 460rpx;
	}

	.dynamiItemImgTime {
		margin-left: 34rpx;
		margin-bottom: 33rpx;
		font-size: 24rpx;
		color: #AAB0B6;
		display: flex;
	}

	/*    dianzanImg  more */
	.dynamiItemImgBottom {
		display: flex;
		align-items: center;
		margin-bottom: 28rpx;
	}

	.more {
		flex: none;
		width: 39rpx;
		height: 25rpx;
		margin-right: 37rpx;
	}

	.dianzan {
		flex: none;
		font-size: 26rpx;

		color: #AAB0B6;
		margin-right: 53rpx;
	}

	.xinxiImg {
		flex: none;
		width: 43rpx;
		height: 43rpx;
		margin-right: 11rpx;
	}

	.xinxi {
		flex: auto;
		font-size: 26rpx;

		color: #AAB0B6;
	}

	.dianzanImg {
		width: 44rpx;
		height: 44rpx;
		margin-left: 30rpx;
		margin-right: 10rpx;
	}

	.guanzhutuijian {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.guanzhuText {
		margin-right: 35rpx;
		font-size: 30rpx;

		color: #282633;
	}

	.curguanzhuText {
		font-size: 33rpx;
		font-weight: bold;
		font-family: PingFang SC;
	}

	.fabu {
		position: absolute;
		right: 31rpx;
		bottom: 0;
		display: flex;
		flex-direction: row;
		font-size: 30rpx;
		color: #17A2F9;
	}

	.fabuImg {
		width: 46rpx;
		height: 46rpx;
		margin-right: 8rpx;
	}

	.flexItemMain {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.flexItemLeft {
		flex: none;
		border-radius: 100%;
		overflow: hidden;
		width: 60rpx;
		height: 60rpx;
		margin-left: 30rpx;
		margin-right: 20rpx;
	}

	.flexItemLeftImg {
		border-radius: 100%;
		flex: none;
		width: 115rpx;
		height: 115rpx;
		margin-left: 31rpx;
		margin-right: 11rpx;
	}

	.flexItemLeft image {
		width: 100%;
		height: 100%;
	}

	.flexItemCenter {
		flex: auto;
		text-align: left;
	}

	.flexItemCenterTop {
		font-size: 28rpx;
		color: #100E1C;

	}

	.flexItemCenterBottom {
		color: #fff;
		font-size: 17rpx;
		/* width: 64rpx; */
		display: inline-block;
		padding-right: 16rpx;
		height: 33rpx;
		background: linear-gradient(-86deg, #FF8AB4, #FD73A3);
		border-radius: 17rpx;

	}

	.flexItemCenterBottom2 {
		color: #fff;
		font-size: 17rpx;
		/* width: 64rpx; */
		display: inline-block;
		padding-right: 16rpx;
		height: 33rpx;
		border-radius: 17rpx;
		background: linear-gradient(-90deg, #5FCAFF, #5B8DFE);

	}

	.sexImg {
		width: 16rpx;
		height: 16rpx;
		margin-left: 12rpx;
		margin-right: 6rpx;
		margin-top: 10rpx;
	}

	.flexrow {
		display: flex;
		align-items: center;
	}

	.flexItemRight {
		flex: none;
		font-weight: bold;
		font-size: 14rpx;
	}

	.flexItemRightImg {
		width: 140rpx;
		height: auto;
		flex: none;
		margin-right: 30rpx;
	}

	.flexItemRight:last-child {
		margin-right: 30rpx;
	}

	.flexItemXian {
		margin-right: 30rpx;
		margin-left: 30rpx;
		height: 1rpx;
		background-color: #DCDCDC;
	}
	
	.flexItemCenterBottom {
		color: #fff;
		font-size: 24rpx;
		line-height: 33rpx;
		padding-right: 16rpx;
		height: 33rpx;
	}
	.distance {
		display: flex;
		align-items: center;
		margin-left: 10upx;
		background: #FFFFFF;
		color: #000000;
	}
	.address {
		width: 33rpx;
		height: 33rpx;
	}
	
	.address-name {
		font-size: 24rpx;
		font-family: PingFang SC;
		color: #6358A0;
		line-height: 43rpx;
	}
</style>
